<template>
  <div>
    <el-container>
      <el-header>
        <div class="header">
          <el-menu :default-active="$route.path"
            router mode="horizontal"
            class="el-menu-demo"
            active-text-color="#ffd04b"
            style="background: lavenderblush">
            <el-menu-item index="/shouye" > <img src="http://qom05wwz5.hd-bkt.clouddn.com/db6674a693c3fd657dfe1b244fb9ee07.png"/></el-menu-item>
            <el-menu-item index="/shouye" >所有陪玩</el-menu-item>
            <el-menu-item index="/tuijian" >热门推荐</el-menu-item>
            <el-menu-item index="/yanzhi" >颜值专区</el-menu-item>
            <el-menu-item index="/jishu" >技术专区</el-menu-item>
            <el-menu-item v-show="this.name" index="/uorder" >我的订单</el-menu-item>
            <el-menu-item>
              <el-input placeholder="请输入内容" >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-menu-item>
            <el-menu-item v-show="!(this.name)" @click="dialogVisible = true" style="float: right">登录</el-menu-item>
            <el-menu-item v-show="!(this.name)" index="/register" style="float: right">注册</el-menu-item>
            <el-menu-item v-show="this.name" index="/center" style="float: right">{{name}}</el-menu-item>
            <el-menu-item v-show="this.name" @click="dialogVisible = true" style="float: right">切换账号</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <router-view :key="$route.fullPath"></router-view>
        </el-main>
        <el-aside width="250px">
          <div class="block">
            <el-carousel trigger="click" height="60px" style="width: 95%;margin-top: 10px;margin-left: 7px">
              <el-carousel-item v-for="item in guanggao" :key="item.id">
                <img :src="item.pic" class="image">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div style="margin-top: 20px;font-family: 微软雅黑;font-weight: bold;background: rgba(240 , 240 , 240 ,0.5);">
            <el-tabs type="border-card" style="text-align: center;height:100%;line-height: 40px;width: 94%;margin: auto;background: rgba(240 , 240 , 240 ,0.5);">
              <el-tab-pane label="热门游戏">
                <div class="game2">
                  <a v-for="game in gList" @click="goByGame(game.gname)">
                    <el-avatar  :size="50" :src="game.pic" style="margin-left: 10px;float: left;margin-top: 10px" ></el-avatar>
                    <div style="width: 60%;float: left;height:70px;line-height: 70px;color: midnightblue;">{{game.gname}}</div>
                  </a>
                </div>
              </el-tab-pane>
              <el-tab-pane label="热门陪玩">
                <a v-for="play in pList">
                  <el-avatar  :size="50" :src="play.pic" style="margin-left: 10px;float: left;margin-top: 10px" ></el-avatar>
                  <div style="width: 60%;float: left;height:70px;line-height: 70px;color: midnightblue;">{{play.name}}</div>
                </a></el-tab-pane>
            </el-tabs>
          </div>
        </el-aside>
      </el-container>
      <el-footer>
        <div class="gcs-footer">
          <div class="footer-top">
            <a href="#">百度网</a> |
            <a href="#">新浪网</a> |
            <a href="#">腾迅房产</a> |
            <a href="#">找货网</a> |
            <a href="#">北极绒</a> |
            <a href="#">阿里巴巴</a> |
          </div>
          <p>
            ©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4
          </p>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      :visible.sync="dialogVisible"
      width="20%">
      <span>
        <div>
          <el-button type="danger" round @click="tologin">用户登录</el-button>
        </div>
         <div style="margin-top: 20px">
           <el-button type="danger" round @click="toplaylogin">陪玩登录</el-button>
         </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
    export default {
      name: "index",
      data() {
        return {
          dialogVisible: false,
          name:'',
          currentDate: new Date(),
          gList:[],
          pList:[],
          guanggao:[
            { id:1,
              pic:'http://qom05wwz5.hd-bkt.clouddn.com/42febe4dd9c1f6de5649c7645175b8ea.jpg\n'
            },
            {
              id:2,
              pic:'http://qom05wwz5.hd-bkt.clouddn.com/4f31e8bdb85afac1237290576357eada.png\n'
            },{
              id:3,
              pic:'http://qom05wwz5.hd-bkt.clouddn.com/e4fd418772904d39c18d640559392514.png\n'
            }
            ]
        }
      },
      created() {
        var user=sessionStorage.getItem("user");
        this.name=user;
      }
    ,
      methods:{
        findAll:function () {
          axios.post("api/play/findAll",{gname:'英雄联盟',page:1,size1:9}).then(res=>{
            this.pList=res.data.data;
          })
        },
        findGame:function () {
          axios.post("api/play/findGame").then(res=>{
            this.gList=res.data.data;
            if (res.data.code==200){
              console.log(res.data.data)
              this.gList=res.data.data;
            }
          })
        },
        tologin:function(){
          this.$router.push({path:'/login'})
        },
        toplaylogin:function(){
          this.$router.push({path:'/playlogin'})
        },
        goByGame:function (gname) {
          this.$router.push(
            {
              path:'/byGame',
              query:{
                gname:gname
              }
            }
          )
        }
      },
      mounted(){
        this.findGame();
        this.findAll();
      }
    }
</script>
<style>
  .gcs-footer{
    margin-top: 0px;
    width: 100%;
    height: 165px;
    text-align: center;
    color: #888888;
    position: absolute;
  }
  .gcs-footer .footer-top{
    line-height: 20px;
    height: 20px;
    margin-top: 5px;
  }
  .gcs-footer a{
    color: #888888;
    text-decoration: none;
    padding: 0 10px;
    vertical-align:middle;
  }

  .gcs-footer a:hover{
    color: red;
    text-decoration: underline;
  }

  .gcs-footer p{
    height: 15px;
    color: #888888;
    margin-top: 10px;
  }
  .game{
    height: 70px;
    margin-top: 10px;
    line-height: 60px;
    align-items: center;

  }
  .game2{
    height: 600px;
    line-height: 60px;
    align-items: center;
  }
  .el-header, .el-footer {
    background-color:lavenderblush;
    color: slateblue;
    align-items: center;
    text-align: left;
    line-height: 10px;
    font-family: 微软雅黑;
    font-weight: bold;
  }

  .el-aside {
    background-color: thistle;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: lavender;
    height: 795px;
    color: #333;
    text-align: center;
    line-height: 160px;
    font-family:微软雅黑
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
